<template>
  <div class="container">
    <el-descriptions class="margin-top" title="用户详情" :column="1" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          姓名
        </template>
        {{ userList.find(user => user.id == id).name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ userList.find(user => user.id == id).mobile }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          地址
        </template>
        {{ userList.find(user => user.id == id).address }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: "UserDetail",
  components: {},
  props: ['id'],
  data() {
    return {
      userList: [
        {id: 3, name: "张三", mobile: "18012345671", address: "湖北武汉", age: 23},
        {id: 4, name: "李四", mobile: "18012345672", address: "广东深圳", age: 24},
        {id: 5, name: "王五", mobile: "18012345673", address: "四川绵阳", age: 25}
      ]
    }
  }
}
</script>

<style scoped>
.container {
  width: 400px;
}
</style>
